<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Iframe Widget Test</title>
    <script nonce="your-nonce-value" type="text/javascript">
      window.addEventListener("DOMContentLoaded", (event) => {
        const iframe = document.createElement("iframe");
        iframe.src = "http://localhost:3000?iframeId=666fc2181f6bb6fa20a4a9e7";
        iframe.style.position = "fixed";
        iframe.style.bottom = "10px";
        iframe.style.right = "10px";
        iframe.style.width = "70px";
        iframe.style.height = "70px";
        iframe.style.border = "none";
        iframe.style.zIndex = "9999";
        document.body.appendChild(iframe);
      });
      window.addEventListener("message", (event) => {
        if (event.data.type === "resize") {
          const iframe = document.querySelector("iframe");
          let newHeight = event.data.height;
          let newWidth = event.data.width;
          if (newHeight === 0) {
            newHeight = 70;
            newWidth = 70;
          }
          iframe.style.height = newHeight + "px";
          iframe.style.width = newWidth + "px";
        }
      });
    </script>
  </head>
  <body>
    <h1>Testing Iframe Widget</h1>

    <!-- Dummy E-commerce Shop Content -->
    <div class="container my-5">
      <h2 class="text-center mb-4">Our Products</h2>
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
        <!-- Product 1 -->
        <div class="col">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Product 1</h5>
              <p class="card-text">$29.99</p>
              <button class="btn btn-primary">Add to Cart</button>
            </div>
          </div>
        </div>
        <!-- Product 2 -->
        <div class="col">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Product 2</h5>
              <p class="card-text">$39.99</p>
              <button class="btn btn-primary">Add to Cart</button>
            </div>
          </div>
        </div>
        <!-- Product 3 -->
        <div class="col">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Product 3</h5>
              <p class="card-text">$49.99</p>
              <button class="btn btn-primary">Add to Cart</button>
            </div>
          </div>
        </div>
        <!-- Product 4 -->
        <div class="col">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Product 4</h5>
              <p class="card-text">$59.99</p>
              <button class="btn btn-primary">Add to Cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
